<template>
  <div class="pd-20">
    <div class="talking-tag">
      <div class="talking-tag__title">场景</div>
      <div class="talking-tag__sub-title">#点击对话框可复制文字内容#</div>
      <div>
        <div
          class="talking-tag__content"
          v-for="tab in conversations.tabs"
          :key="tab"
        >
          <span class="talking-tag__content_title">{{ tab }}</span>
          <div
            class="tab-content"
            v-for="(content, i) in conversations.contents[tab]"
            :key="i"
          >
            <div
              v-if="!isEven(`${i + 1}`)"
              class="text-left"
              @click="copyWord(content)"
            >
              {{ content }}
            </div>
            <div v-else class="text-right" @click="copyWord(content)">
              {{ content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scenes1 } from "../data/data";
import { copyWord } from "../utils/copy";

export default {
  data() {
    return {
      contents: {
        ...scenes1,
      },
    };
  },
   computed: {
        topic() {
            return '场景'
        },
        conversations() {
            const tabs = Object.keys(this.contents);
            const contents = this.contents;
            return {
                tabs,
                contents
            }
        }
    },
  methods: {
    copyWord(words) {
      return copyWord(words);
    },
    isEven(i) {
      return i % 2 === 0;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>